<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>超简单跑马灯 Super Simple Marquee</h2>
                <p>这是最简单的跑马灯，原理是把前面的字符放到后面去。鼠标移入时候可暂停动画，移出恢复。支持插槽，但请注意，插槽中不能包含 tag。</p>
                <p>属性说明：</p>
                <table class="aj-table propertyTable">
                    <tr>
                        <th>属性</th>
                        <th>含义</th>
                        <th>类型</th>
                        <th>是否必填</th>
                        <th>默认值</th>
                    </tr>
                    <tr>
                        <td>interval</td>
                        <td>动画时间间隔，定时器的参数</td>
                        <td>Number</td>
                        <td>N</td>
                        <td>500</td>
                    </tr>
                    <tr>
                        <td>canstop</td>
                        <td>是否可以鼠标移入时候暂停动画</td>
                        <td>Boolean</td>
                        <td>N</td>
                        <td>true</td>
                    </tr>
                </table>

                <br />

                <div class="SuperSimpleMarquee">
                    <aj-super-simple-marquee></aj-super-simple-marquee>
                </div>

                <h2>上下字幕跑马灯 Marquee</h2>
                <style>
                    .simpleMarquee {
                        height: 25px;
                        overflow: hidden;
                    }

                    .simpleMarquee ol {
                        padding: 0;
                        margin: 0;
                        line-height: 25px;
                    }
                </style>
                <p>属性说明：</p>
                <table class="aj-table propertyTable">
                    <tr>
                        <th>属性</th>
                        <th>含义</th>
                        <th>类型</th>
                        <th>是否必填</th>
                        <th>默认值</th>
                    </tr>
                    <tr>
                        <td>interval</td>
                        <td>动画时间间隔，定时器的参数</td>
                        <td>Number</td>
                        <td>N</td>
                        <td>500</td>
                    </tr>
                    <tr>
                        <td>canstop</td>
                        <td>是否可以鼠标移入时候暂停动画</td>
                        <td>Boolean</td>
                        <td>N</td>
                        <td>true</td>
                    </tr>
                </table>

                <div class="simpleMarquee">
                    <aj-simple-marquee></aj-simple-marquee>
                </div>

            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
    <script src="../../dist/base/prototype.js"></script>
    <script src="../../dist/carousel/marquee.js"></script>
    <script>
        new Vue({ el: '.SuperSimpleMarquee' });
        new Vue({ el: '.simpleMarquee' });
    </script>
</body>

</html>